<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <rx-layout>
            <div slot="center" >
                <a-form-model ref="form" :model="mdl" :rules="rules">
                    <a-row>
                        <a-col :span="12">
                            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.name','名称')" prop="name">
                                <a-input :placeholder="i18n('form.name','名称')" v-model="mdl.name"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.alias','别名')" prop="alias">
                                <a-input :placeholder="i18n('form.alias','别名')" v-model="mdl.alias"/>
                            </a-form-model-item>
                        </a-col>
                    </a-row>

                    <a-row>
                        <a-col :span="24">
                            <a-form-model-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.category','分类')"
                                               prop="categoryId">
                                <rx-category-select cat-key="FORM" style="width: 43%;" :readKey="id?'edit':'add'"
                                                    v-if="isShowManageTree" :isAdmin="isManageToTree"
                                                    :isGrant="true" height="150px" v-model="mdl.categoryId" >
                                </rx-category-select>
                            </a-form-model-item>
                        </a-col>
                    </a-row>

                    <a-row>
                        <a-col :span="24">
                            <a-form-model-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.OUTSIDEurl','外部表单url')"
                                               prop="component">
                                <a-input :placeholder="i18n('form.OUTSIDEurl','外部表单url','input')" v-model="mdl.component" :rows="4"/>
                            </a-form-model-item>
                        </a-col>
                    </a-row>

                </a-form-model>
                <out-side-url-form-params-edit v-if="urlParamsShow" ref="urlParm"
                                               :urlParamData="urlParams"></out-side-url-form-params-edit>
            </div>
        </rx-layout>
    </rx-dialog>
</template>

<script>
    import {BaseFormModel, RxDialog} from "@lowcode/jpaas-common-lib";
    import FormPcApi from '@/api/form/core/formPc';
    import OutSideUrlFormParamsEdit from "./OutSideUrlFormParamsEdit.vue"

    export default {
        name: "form-pc-custom-edit",
        mixins: [BaseFormModel],
        props: ["id"],
        components: {
            OutSideUrlFormParamsEdit
        },
        data() {
            return {
                type: "OUTSIDE-URL",
                deployed: "1",
                version: "1",
                main: "1",
                appId: this.$parent.curApp.appId,
                urlParams: [],
                urlParamsShow: false,
                rules: {
                    name: [{required: true, message: this.i18n('form.name','请输入名称','input'), trigger: 'change'}],
                    alias: [{required: true, message: this.i18n('form.alias','请输入别名','input'), trigger: 'change'}],
                    categoryId: [{required: true, message: this.i18n('list.formClass','请选择表单分类','select'), trigger: 'change'}],
                    component: [{required: true, message: this.i18n('form.exturl','请输入外部url','input'), trigger: 'change'}]
                }
            }
        },
        created() {
            this.isUserManager(this.$route.query.appId);
            if (this.id) {
                this.getById();
            }else {
                this.urlParamsShow = true;
            }
        },
        methods: {
            i18n(name,text,key){
                return this.$ti18(name,text,"formPc",key);
            },
            getById() {
                var self_ = this;
                FormPcApi.get(this.id).then(res => {
                    if (res.success) {
                        self_.mdl = Object.assign(res.data);
                        if (res.data.urlParams) {
                            self_.urlParams = JSON.parse(res.data.urlParams);
                        }
                    }
                    self_.urlParamsShow = true;
                })
            },
            validForm() {

                var urlParm = this.$refs.urlParm;
                var validJson = urlParm.valid();
                if (!validJson.success) {
                    return false;
                }
                return true;
            },
            save(data) {

                var urlParm = this.$refs.urlParm;
                var urlParamList = urlParm.getData();
                if (urlParamList && urlParamList.length > 0) {
                    data.urlParams = JSON.stringify(urlParamList);
                }
                data.appId = this.appId;

                if (!data.id) {
                    data.type = "OUTSIDE-URL";
                    data.deployed = "1";
                    data.version = "1";
                    data.main = "1";
                }
                return FormPcApi.save(data);
            }

        }
    }
</script>

<style scoped>

</style>